<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
       <!-- <p>{{title}}</p> -->
     <!--<p>{{content}}</p> -->
      <!-- <p>{{output()}}</p> -->
      <!-- <p>{{outputContent}}</p>
      <p>{{outputContent}}</p>
      <p>{{outputContent}}</p> -->
      <!-- <p v-text="contentHtml">123</p>  
      <p v-html="contentHtml">456</p>  
      <p v-for="(item,key,index) in arr">这是内容：{{item}} {{key}} {{index}}</p> -->
      <!-- <p v-if="bool">销毁内容</p>
      <p v-show="bool">显示内容</p> -->
      <!-- <p v-bind:title="title">这是内容</p>
      <p :title="title">这是内容2</p> -->
      <!-- <button v-on:click="output">确定</button> -->

      <input type="text" v-model="inputVal">
      <p v-text="inputVal"></p>
    </div>
    <script src="./vue.min.js"></script>

    <script>
      const value = "helll world";
      // document.getElementById("box").textContent = value;

      const vm = new Vue({ 
        //1.响应式数据与插入表达式
        el: "#app",
        data() {
          return {
            title: "标题文本",
            content: "内容文本",
            contentHtml: '这是一个<span>span</span>标签',
            obj:{'a':'10','b':'20','c':'30'},
            arr:['a','b','c'],
            bool:true,
            inputVal:'默认值'

          };
        },
        methods: {
          output() {
            console.log('执行方法')
            return "标题为：" + this.title + " 内容为：" + this.content;
          },
        },
        computed: {
          outputContent() {
            console.log("执行了计算属性");
            return "标题为：" + this.title + " 内容为：" + this.content;
          },
        },
        watch:{
          title(newVal,oldVal){
            console.log(newVal,oldVal)
          }
        }
      });
    </script>
    <!-- built files will be auto injected -->
  </body>
</html>
<html></html>
